<template>
	<el-row>
		<el-col :span="24">
			<el-card>
				<template #header>
					<div class="card-header">
						<span>用户分析</span>
					</div>
				</template>
				<el-descriptions direction="vertical" column="4">
					<el-descriptions-item align="center" label="年度总活跃数" class-name="my-content">
						{{total_active_person}}
					</el-descriptions-item>

					<el-descriptions-item label="活跃度最高月份" align="center">{{max_active.month}}</el-descriptions-item>
					<el-descriptions-item label="该月活跃人数"
						align="center">{{max_active.maxActiveCount}}</el-descriptions-item>
					<el-descriptions-item label="占比"
						align="center">{{max_active.activeRatioPercent}}</el-descriptions-item>
				</el-descriptions>
			</el-card>
		</el-col>
	</el-row>
	<el-row :gutter="10">
		<el-col :span="12">
			<el-card>
				<template #header>
					<div class="card-header">
						<span>用户性别分析</span>
					</div>
				</template>
				<div id="userSexCharts" style="height: 300px;"></div>
			</el-card>
		</el-col>
		<el-col :span="12">
			<el-card>
				<template #header>
					<div class="card-header">
						<span>用户活跃度分析</span>
					</div>
				</template>
				<div id="userScaleCharts" style="height: 300px;"></div>
			</el-card>
		</el-col>
	</el-row>
</template>

<script setup lang="ts">
	import * as echarts from 'echarts';
	import { onMounted } from 'vue';
	import axios from 'axios';
	import { ref } from 'vue';

	let max_active = ref({
		maxActiveCount: null,
		month: '',
		scale: null,
		activeRatioPercent: null,
	});

	let total_active_person = ref(null);
	onMounted(() => {
		axios({
			url: '/api/user/analysis',
			method: 'GET',
			params: {}
		}).then(response => {
			console.log(response.data);
			const userSexData = response.data.user_sex;
			const userScaleData = response.data.person_month;
			max_active.value = response.data.max_active;
			total_active_person.value = response.data.total_active_person

			initUserSexCharts(userSexData);
			initUserScaleCharts(userScaleData);

		});
	});


	//-----------------------------  年度活跃度图表 ---------------------------------
	// 清洗活跃度数据
	const prepareUserScaleData = (data) => {
		let userScaleData = new Array(3);

		data.forEach(item => {
			if (item.month === '1') {
				userScaleData[0] = { value: item.scale };
			} else if (item.month === '2') {
				userScaleData[1] = { value: item.scale };
			} else if (item.month === '3') {
				userScaleData[2] = { value: item.scale };
			} else if (item.month === '4') {
				userScaleData[3] = { value: item.scale };
			} else if (item.month === '5') {
				userScaleData[4] = { value: item.scale };
			} else if (item.month === '6') {
				userScaleData[5] = { value: item.scale };
			} else if (item.month === '7') {
				userScaleData[6] = { value: item.scale };
			} else if (item.month === '8') {
				userScaleData[7] = { value: item.scale };
			} else if (item.month === '9') {
				userScaleData[8] = { value: item.scale };
			} else if (item.month === '10') {
				userScaleData[9] = { value: item.scale };
			} else if (item.month === '11') {
				userScaleData[10] = { value: item.scale };
			} else if (item.month === '12') {
				userScaleData[11] = { value: item.scale };
			}
		});
		return userScaleData;
	}
	// 绘制用户性别图表
	const initUserScaleCharts = (userScaleData) => {
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('userScaleCharts'));

		const option = {
			xAxis: {
				type: 'category',
				data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']

			},
			yAxis: {
				type: 'value'

			},
			series: [
				{

					data: prepareUserScaleData(userScaleData),
					type: 'line'

				}]

			//  title: {
			// // text: 'Referer of a Website',
			// // subtext: 'Fake Data',
			// left: 'center'
			//  },
			//  tooltip: {
			// trigger: 'item'
			//  },
			//  legend: {
			// orient: 'vertical',
			// left: 'left'
			//  },
			//  series: [
			// {
			//   name: 'Access From',
			//   type: 'pie',
			//   radius: '80%',
			//   data:prepareUserScaleData(userScaleData),
			//   //调用清洗数据方法
			//   emphasis: {
			// 	itemStyle: {
			// 	  shadowBlur: 10,
			// 	  shadowOffsetX: 0,
			// 	  shadowColor: 'rgba(0, 0, 0, 0.5)'
			// 	}
			//   }
			// }
			//  ]
		};
		myChart.setOption(option);
	}
	//-----------------------------  用户性别图表 ---------------------------------
	// 清洗用户性别数据
	const prepareUserSexData = (data) => {
		let userSexData = new Array(3);
		//男：1，女：2，未知：3
		data.forEach(item => {
			if (item.user_sex === '1') {
				userSexData[0] = { value: item.count, name: '男' };
			} else if (item.user_sex === '2') {
				userSexData[1] = { value: item.count, name: '女' };
			} else {
				userSexData[2] = { value: item.count, name: '未知' };
			}
		});
		return userSexData;
	}
	// 绘制用户性别图表
	const initUserSexCharts = (userSexData) => {
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('userSexCharts'));

		const option = {
			title: {
				// text: 'Referer of a Website',
				// subtext: 'Fake Data',
				left: 'center'
			},
			tooltip: {
				trigger: 'item'
			},
			legend: {
				orient: 'vertical',
				left: 'left'
			},
			series: [
				{
					name: 'Access From',
					type: 'pie',
					radius: '80%',
					data: prepareUserSexData(userSexData),
					//调用清洗数据方法
					emphasis: {
						itemStyle: {
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: 'rgba(0, 0, 0, 0.5)'
						}
					}
				}
			]
		};
		myChart.setOption(option);
	}
</script>

<style scoped>
	.el-row {
		margin-bottom: 10px;
	}

	.card-header {
		color: green;
	}

	:deep(.my-label) {
		color: darkgray;
	}

	:deep(.my-content) {
		color: red;
	}
</style>